<template>
  <div class="login-form-container">
    <form class="login-form" autocomplete="off" @submit.prevent="loginfn">
      <div class="input-box">
        <i class="el-icon-user input-logo"></i>&nbsp;&nbsp;
        <input
          class="login-input"
          type="text"
          name="username"
          placeholder="请输入用户名"
          required
        />
      </div>
      <div class="input-box">
        <i class="el-icon-key input-logo"></i>&nbsp;&nbsp;
        <input
          class="login-input"
          type="password"
          name="password"
          placeholder="请输入密码"
          required
        />
      </div>
      <button class="login-btn">登&nbsp;&nbsp;录</button>
    </form>
  </div>
</template>

<script>
import router from "@/router";
import axios from "axios";
export default {
  data() {
    return {};
  },
  methods: {
    // 登录失败信息
    loginFalse() {
      this.$message.error("账号或密码错误，请重新输入！", {
        duration: 2000,
        showClose: true,
      });
    },
    // 登录成功信息
    loginSuccess() {
      this.$message.success("登录成功！", {
        duration: 2000,
        showClose: true,
      });
    },
    // 登录函数
    async loginfn() {
      // 创建一个axios实例
      const myAxios = axios.create({
        baseURL: "http://127.0.0.1:3000",
        timeout: 3000,
        headers: { "Content-Type": "application/json" },
      });

      // 获取输入框的值
      let username = document.querySelectorAll("input")[0].value;
      let password = document.querySelectorAll("input")[1].value;
      let email = '';
      let userData = { username, password,email };

      // 发送登录请求
      const { data: res } = await myAxios.post("/login", userData);
      if (res.status == 200) {
        // 登录成功，存储用户信息到localStorage
        userData.email = res.email;
        localStorage.setItem("userInfo", JSON.stringify(userData));
        router.push("/");
        // 登录成功，调用登录成功弹窗函数
        this.loginSuccess();
        window.location.reload();
      } else {
        // 登录失败，调用登录失败弹窗函数
        this.loginFalse();
        // 清空输入框内容并重新聚焦到用户名输入框
        document.querySelectorAll("input")[0].value = "";
        document.querySelectorAll("input")[1].value = "";
        document.querySelectorAll("input")[0].focus();
      }
    },
  },
};
</script>

<style scoped>
/* 表单容器样式 */
.login-form-container {
  width: 250px;
  height: 250px;
}

/* 表单整体样式 */
.login-form {
  height: 100%;
  width: 100%;

  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

/* 输入框容器样式 */
.input-box {
  height: 14%;
  width: 80%;
  /* display: block; */
  border: #ffb188 solid;
  border-radius: 20px;
  background-color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* 输入框样式 */
.login-input {
  width: 69%;
  border: none;
  display: block;
  margin: auto;
  height: 80%;
  margin-top: 2%;
  outline: none;
}

/* 输入框logo样式 */
.input-logo {
  font-size: 20px;
  color: #ffa500;
  margin-left: 15px;
}

/* 登录按钮样式 */
.login-btn {
  width: 60%;
  height: 30px;
  border-radius: 20px;
  background-color: #ffa500;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 17px;
  font-weight: bold;
}

.login-btn:hover {
  background-color: #fff;
  color: #ffa500;
  transition: all 0.3s ease-in-out;
}
</style>